import React from 'react';
import { Avatar, Button, Image, Toast } from 'antd-mobile';
import { Knowledge } from '@/type/HomeTyoe';
import useFollow from '@/hooks/useFollow';
import './KnowledgeCard.scss';

interface KnowledgeCardProps {
  knowledge: Knowledge;
}

const KnowledgeCard: React.FunctionComponent<KnowledgeCardProps> = ({ knowledge }) => {

  const { id, message, loading, handleFollow } = useFollow();

  /**
   * @description 点击关注按钮的回调函数
   * */
  const follow = async () => {
    const like = knowledge.likeFlag === 1 ? 0 : 1;
    await handleFollow({ type: 'knowledge', id: knowledge.id }, like);
    knowledge.likeFlag = like;
    Toast.show({ icon: 'success', content: message.current });
  };

  return (
    <div className="knowledge-card">
      <div className="head">
        <Avatar className="avatar" src={knowledge.creatorAvatar}></Avatar>
        <div className="info">
          <p className="name">{knowledge.creatorName}</p>
          <p className="dep ellipsis-single">{knowledge.creatorHospatalName} {knowledge.creatorDep} {knowledge.creatorTitles}</p>
        </div>
        <Button className="button" size="small" onClick={follow} loading={loading}>{knowledge.likeFlag === 1 ? '已关注' : '+关注'} </Button>
      </div>
      <div className="body">
        <h3 className="title van-ellipsis">{knowledge.title}</h3>
        <p className="tag">
          <span># {knowledge.topic}</span>
          <span># {knowledge.creatorId}</span>
          <span># {knowledge.id}</span>
        </p>
        <p className="intro ellipsis-multi">{knowledge.content.replace(/<[^>]+>/g, '')}</p>
        <div className="imgs">
          {
            knowledge.coverUrl.map((item, index) => <Image src={item} key={index} />)
          }
        </div>
        <p className="logs">
          <span>{knowledge.collectionNumber} 收藏</span>
          <span>{knowledge.commentNumber} 评论</span>
        </p>
      </div>
    </div>
  );
};

export default KnowledgeCard;